<template>
  <ry-modal title="细胞信息" v-model="visible" destroyOnClose
    :confirmLoading="confirmLoading" @ok="clickProject" width="1200px">
      <div class="table-container">
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form-model layout="inline" v-bind="searchModelConfig"
                        @keyup.enter.native="searchQuery">
            <a-row v-bind="searchRowConfig">
              <a-col :span="6">
                <a-form-model-item>
                  <a-input v-model="queryParam.searchValue" placeholder="请输入身份证号码/姓名/联系电话" :disabled="serialNumber !== undefined">
                    <a-icon slot="prefix" class="font-placeholder" type="search" />
                  </a-input>
                </a-form-model-item>
              </a-col>
              <a-col class="table-page-search-submitButtons" v-bind="searchColConfig">
                <a-button @click="searchData" type="primary">查询</a-button>
              </a-col>
            </a-row>
          </a-form-model>
        </div>
        <a-row>
          <a-col :span="24">
            <ry-table :columns="columns" :loading="loading" :data-source="dataSource"
                      :rowKey="record=>record.id" :pagination="ipagination" bordered
                      :scroll="{ x: 'max-content'}">
              <template slot="applyProject" slot-scope="{text}">
                  <span v-if="text">
                    <a-tag color="blue">{{$getDictName('APPLY_PROJECT', text)}}</a-tag>
                  </span>
                <span v-else>--</span>
              </template>
              <template slot="birth" slot-scope="{text}">
                  <span v-if="text">
                    {{getAge(text)}}
                  </span>
                <span v-else>--</span>
              </template>
              <template slot="cardName" slot-scope="{text}">
                  <span v-if="text">
                    <a-tag color="blue">{{text}}</a-tag>
                  </span>
                <span v-else>--</span>
              </template>
              <template slot="action" slot-scope="{record}">
                <a-button type="primary" @click="clickProject(record)">选择</a-button>
              </template>
            </ry-table>
          </a-col>
        </a-row>
      </div>
  </ry-modal>
</template>

<script>
import { RyListMixin } from '@/ryweb'

export default {
  mixins: [RyListMixin],
  data () {
    return {
      count: 0,
      confirmLoading: false,
      initQuery: false,
      visible: false,
      selectedRows: [],
      queryParam: {},
      serialNumber: undefined,
      modelConfig: {
        ref: 'ruleForm',
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      url: {
        list: this.$api.permission.applyProject.applyProject,
      },
      columns: [
        {
          title: '客户名称',
          align: 'center',
          dataIndex: 'businessAccount.nickname'
        },
        {
          title: '客户编号',
          align: 'center',
          dataIndex: 'businessAccount.serialNumber'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'businessAccount.sex'
        },
        {
          title: '年龄',
          align: 'center',
          dataIndex: 'businessAccount.birth',
          scopedSlots: { customRender: 'birth' }
        },
        {
          title: '项目',
          align: 'center',
          dataIndex: 'applyProject',
          scopedSlots: { customRender: 'applyProject' }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remake'
        },
        {
          title: '数量',
          align: 'center',
          dataIndex: 'projectNumber'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '创建者',
          align: 'center',
          dataIndex: 'createBy'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
    }
  },
  created () {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    open (serialNumber) {
      this.serialNumber = serialNumber
      console.log('this.serialNumber',this.serialNumber)
      if (serialNumber) {
        this.queryParam = {
          projectType: '0',
          serialNumber: serialNumber
        }
        this.loadData()
      } else {
        this.queryParam = {
          projectType: '0',
        }
      }
      this.visible = true
    },
    searchData () {
      this.loadData()
    },
    clickProject (record) {
      this.$emit('project', record)
      this.visible = false
    },
    getAge (birth) {
      const birthDate = new Date(birth);
      const today = new Date();

      let age = today.getFullYear() - birthDate.getFullYear();
      const monthDiff = today.getMonth() - birthDate.getMonth();

      // 如果今年生日还没过，年龄减1
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
        age--;
      }
      // 更新表单数据
      return age
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.15rem;
}
.editable-add-btn {
  margin-bottom: 8px;
}
.table-container {
  padding: 0px;
}
</style>
<style>
/* 使用更高优先级的选择器覆盖默认宽度 */
body .ry-modal {
  width: 60% !important;
}
</style>
